<template>
  <div class="q-pa-md">
    <t-item style="max-width: 300px">
      <t-item-section avatar>
        <t-skeleton type="QAvatar" />
      </t-item-section>

      <t-item-section>
        <t-item-label>
          <t-skeleton type="text" />
        </t-item-label>
        <t-item-label caption>
          <t-skeleton type="text" width="65%" />
        </t-item-label>
      </t-item-section>
    </t-item>

    <t-item style="max-width: 300px">
      <t-item-section avatar>
        <t-skeleton type="QAvatar" />
      </t-item-section>

      <t-item-section>
        <t-item-label>
          <t-skeleton type="text" />
        </t-item-label>
        <t-item-label caption>
          <t-skeleton type="text" width="90%" />
        </t-item-label>
      </t-item-section>
    </t-item>

    <t-item style="max-width: 300px">
      <t-item-section avatar>
        <t-skeleton type="QAvatar" />
      </t-item-section>

      <t-item-section>
        <t-item-label>
          <t-skeleton type="text" width="35%" />
        </t-item-label>
        <t-item-label caption>
          <t-skeleton type="text" />
        </t-item-label>
      </t-item-section>
    </t-item>
  </div>
</template>
